<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
    <title>Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="styles/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="styles/dashboard.css" rel="stylesheet">
</head>

<body style="height: 100%">
    <div class="container-fluid" style="height: 100%">
        <div class="row" style="height: 66.6%">
            <div class="col-3" style="height: 100%">
                <div id="paint-consuming" class="row bg-darkblue div-component" style="height: 50%">
                </div>
                <div id="realtime-device-status" class="row bg-darkblue div-component" style="height: 50%">
                </div>
            </div>
            <div id="processing-indoor-temp" class="col-6 bg-darkblue div-component" style="height: 100%">
            </div>
            <div class="col-3" style="height: 100%">
                <div id="paint-pow-consuming" class="row bg-darkblue div-component" style="height: 50%">
                </div>
                <div id="latest-alert" class="row bg-darkblue div-component" style="height: 50%">
                    <div class="col-12 pre-scrollable">
                        <h5 class="text-white m-auto text-center">最新报警信息
                        </h5>
                        <dl class="dl-horizontal text-white">
                            <dt>编号</dt>
                            <dd>Welder09</dd>
                            <dt>事件类型</dt>
                            <dd>报警</dd>
                            <dt>发生时间</dt>
                            <dd>2018/11/13 12:05:13</dd>
                            <dt>详情</dt>
                            <dd>Err-10</dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="height: 33.3%">
            <div id="working-status" class="col-3 bg-darkblue div-component" style="height: 100%"></div>
            <div id="single-module-cost" class="col-6 bg-darkblue div-component" style="height: 100%"></div>
            <div id="weekly-painting-quality" class="col-3 bg-darkblue div-component" style="height: 100%"></div>
        </div>
    </div>
    <script type="text/javascript" src="scripts/jquery.slim.min.js"></script>
    <script type="text/javascript" src="styles/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="scripts/echarts.min.js"></script>
    <script type="text/javascript" src="scripts/dashboard.js"></script>
    <script type="text/javascript">
        var dateAxis = getWeekAxis();
        var hourAxis = getHourAxis();
        var domLatestAlert = document.getElementById("latest-alert");
        var paintPowConsumingChart = echarts.init(document.getElementById("paint-consuming"));
        var realtimeDeviceStatusChart = echarts.init(document.getElementById("realtime-device-status"));
        var processingIndoorTempChart = echarts.init(document.getElementById("processing-indoor-temp"));
        var powerConsumingChart = echarts.init(document.getElementById("paint-pow-consuming"));
        var workingStatusChart = echarts.init(document.getElementById("working-status"));
        var singleModuleCostChart = echarts.init(document.getElementById("single-module-cost"));
        var weeklyPaintingQualityChart = echarts.init(document.getElementById("weekly-painting-quality"));
        var app = {};
        optionPaintPowConsuming = {
            color: ['#F00', '#FB0'],
            title: {
                text: '油漆用量（当天）',
                textStyle: {
                    color: '#FFF' // 主标题文字颜色
                },
                x: 'center',
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['自动喷漆', '手动喷漆'],
                splitLine: {
                    show: false
                }, //去除网格线
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '2' //坐标线的宽度
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: 'kg',
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '2' //坐标线的宽度
                    }
                },
            },
            series: [{
                data: [20.28, 0],
                type: 'bar',
                stack: '自动喷',
                barWidth: 40,
            }, {
                data: [0, 10.6],
                type: 'bar',
                stack: '自动喷',
                barWidth: 40,
            }]
        };
        optionRealtimeDeviceStatus = {
            color: ['#F00', '#FB0', '#F0B', '#0BF'],
            title: {
                text: '设备实时状态',
                x: 'center',
                textStyle: {
                    color: '#FFF'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['报警', '待机', '关机', '焊接'],
                textStyle: {
                    color: '#FFF'
                }
            },
            series: [{
                name: '设备实时状态',
                type: 'pie',
                radius: '70%',
                center: ['50%', '50%'],
                data: [{
                        value: 0,
                        name: '报警'
                    },
                    {
                        value: 73,
                        name: '待机'
                    },
                    {
                        value: 10,
                        name: '关机'
                    },
                    {
                        value: 17,
                        name: '焊接'
                    }
                ],
                label: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        optionPowerConsuming = {
            tooltip: {
                formatter: "{a} <br/>{b} : {c}（千瓦时）"
            },
            series: {
                name: '当天能耗',
                type: 'gauge',
                min: 0,
                max: 220,
                radius: '95%',
                detail: {
                    formatter: '{value}（千瓦时）'
                },
                data: [{
                    value: 50.445,
                    name: '当天总能耗'
                }],
                axisLabel: {
                    backgroundColor: 'auto',
                    borderRadius: 2,
                    color: '#eee',
                    padding: 3,
                    textShadowBlur: 2,
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 1,
                    textShadowColor: '#222'
                },
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: { // 坐标轴小标记
                    length: 12, // 属性length控制线长
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: { // 分隔线
                    length: 20, // 属性length控制线长
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                title: {
                    fontWeight: 'bolder',
                    fontSize: 15,
                    color: '#FFF'
                },
                detail: {
                    formatter: function (value) {
                        value = (value + '').split('.');
                        value.length < 2 && (value.push('00'));
                        return ('00' + value[0]).slice(-2) +
                            '.' + (value[1] + '00').slice(0, 2);
                    },
                    x: 'buttom',
                    fontFamily: 'Arial',
                    width: 100,
                    color: '#eee',
                    rich: {}
                },
            }
        };
        optionWorkingStatus = {
            color: ['#F00', '#FB0', '#F0B', '#0BF'],
            title: {
                text: '工位开动率看板',
                textStyle: {
                    color: '#FFF'
                },
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['自动喷', '手动喷'],
                x: 'right',
                orient: 'vertical',
                itemGap: 4,
                textStyle: {
                    color: '#FFF'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: dateAxis,
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '2' //坐标线的宽度
                    }
                },
            },
            yAxis: {
                type: 'value',
                name: '%',
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '2' //坐标线的宽度
                    }
                },
            },
            series: [{
                    name: '自动喷',
                    type: 'line',
                    data: [48.92689211, 97.78401517, 1.420900046, 10.88950953, 20.40810534, 75.41297649,
                        36.83933608,
                    ]
                },
                {
                    name: '手动喷',
                    type: 'line',
                    data: [60.1484415, 31.30951703, 39.90961392, 12.38050457, 82.93044147, 59.6110995,
                        64.34730357,
                    ]
                }
            ]
        };
        optionSingleModuleCost = {
            color: ["#0FF", "#EEE"],
            title: {
                text: '单节模块用量',
                textStyle: {
                    color: '#FFF'
                },
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['自动喷', '手动喷'],
                x: 'right',
                textStyle: {
                    color: '#FFF'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: dateAxis,
                axisLine: {
                    lineStyle: {
                        color: "#FFF"
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                name: 'h',
                axisLine: {
                    lineStyle: {
                        color: "#FFF"
                    }
                }
            }],
            series: [{
                    name: '自动喷',
                    type: 'bar',
                    data: [98.33, 93.94, 83.05, 86.23, 0, 75.98, 42.8]
                },
                {
                    name: '手动喷',
                    type: 'bar',
                    data: [425.27, 424.43, 349.49, 340.69, 49.40, 302.05, 145.14]
                },
            ]
        };
        optionWeeklyPaintingQuality = {
            color: ["#0AF", "#EEE", '#F00'],
            title: {
                text: '一周喷漆品质统计',
                textStyle: {
                    color: '#FFF'
                },
                x: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['良好', '正常', '超规范'],
                x: 'right',
                textStyle: {
                    color: '#FFF'
                },
                orient: 'vertical',
                itemGap: 4,
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{

                type: 'category',
                data: dateAxis,
                axisLine: {
                    lineStyle: {
                        color: "#FFF"
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: "#FFF"
                    }
                }
            }],
            series: [{
                    name: '良好',
                    type: 'bar',
                    stack: '总产量',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '正常',
                    type: 'bar',
                    stack: '总产量',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '超规范',
                    type: 'bar',
                    stack: '总产量',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },

            ]
        };
        optionIndoorTemp = {
            color: ['#F00', '#FB0', '#F0B', '#0BF'],
            title: {
                text: '室内温度显示',
                textStyle: {
                    color: '#FFF'
                },
                x: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            legend: {
                top: 10,
                right: 10,
                data: ['烘房1-1TIC1', '烘房2-1TIC1', '烘房2-2TIC1', '强冷-1TIC1'],
                itemGap: 4,
                width: 300,
                textStyle: {
                    color: '#FFF'
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: hourAxis,
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '2' //坐标线的宽度
                    }
                },
            },
            yAxis: [{
                type: 'value',
                name: '温度',
                min: 0,
                max: 100,
                axisLabel: {
                    formatter: '{value} °C'
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '2' //坐标线的宽度
                    }
                },
            }],
            series: [{
                    name: '烘房1-1TIC1',
                    type: 'line',
                    data: [20, 32, 1, 34, 90, 30, 20, 20, 32, 1, 20, 32, 1, 34, 90, 30, 20, 20, 32, 1, 20, 32,
                        1, 34, 90, 30, 20, 20, 32, 1, 20, 32, 1, 34, 90, 30, 20, 20, 32, 1, 20, 32, 1, 34,
                        90, 30, 20, 20, 32, 1, 20, 32, 1, 34, 90, 30, 20, 20, 32, 1
                    ],
                    markLine: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    }
                },
                {
                    name: '烘房2-1TIC1',
                    type: 'line',
                    data: [32, 1, 34, 90, 30, 20, 20, 32, 1, 34, 32, 1, 34, 90, 30, 20, 20, 32, 1, 34, 32, 1,
                        34, 90, 30, 20, 20, 32, 1, 34, 32, 1, 34, 90, 30, 20, 20, 32, 1, 34, 32, 1, 34, 90,
                        30, 20, 20, 32, 1, 34, 32, 1, 34, 90, 30, 20, 20, 32, 1, 34
                    ],
                    markLine: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    }
                },
                {
                    name: '烘房2-2TIC1',
                    type: 'line',
                    data: [1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 1, 34,
                        90, 30, 20, 20, 32, 1, 34, 90, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 1, 34, 90, 30,
                        20, 20, 32, 1, 34, 90, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90
                    ],
                    markLine: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    }
                },
                {
                    name: '强冷-1TIC1',
                    type: 'line',
                    data: [1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 1, 34,
                        90, 30, 20, 20, 32, 1, 34, 90, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 1, 34, 90, 30,
                        20, 20, 32, 1, 34, 90, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90
                    ],
                    markLine: {
                        data: [{
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    }
                }
            ]
        }
        paintPowConsumingChart.setOption(optionPaintPowConsuming, true);
        realtimeDeviceStatusChart.setOption(optionRealtimeDeviceStatus, true);
        processingIndoorTempChart.setOption(optionIndoorTemp, true);
        powerConsumingChart.setOption(optionPowerConsuming, true);
        workingStatusChart.setOption(optionWorkingStatus, true);
        singleModuleCostChart.setOption(optionSingleModuleCost, true);
        weeklyPaintingQualityChart.setOption(optionWeeklyPaintingQuality, true);
    </script>
</body>

</html>